本文為總結所有學到的 React 內容以及一些規範程式碼的工具,如 ESlint 及 propTypes
一、這一次的總結回顧了一些 React 底層的知識、舊有版本的語法及下半場學到目前為止的內容:
useEffect
render 機制
useCallback: 背後是用 useRef 實作的
useMemo
memo
Class component
useContext
建議把官方文件中文或英文版本全部看過一遍,知道有哪些東西
二、利用 propTypes 驗證 props
使用的目的是為了增進程式碼品質
1. 在根目錄底下建一個 eslintrc.json 的檔案
2. 在 eslintrc.json 裡面放入以下內容:
{
// 要先繼承 react-app 裡面原本的規則
"extends": ["react-app"],
// 新增自己的規則 react/prop-types
"rules": {
"react/prop-types": "warn"
}
}
3. 存擋以後,再重新跑一次 npm run start
就會發現多了很多警告提示。
React 官方文件解釋:
https://create-react-app.dev/docs/setting-up-your-editor
現在用的規則名稱叫做 "react/prop-types"
Prevent missing props validation in a React component definition (react/prop-types)
4. 接著根據錯誤提示來整理一下內容吧
a. 首先引入 import PropTypes from "prop-types";
b. 把錯誤提示提到的 prop-types 定義在檔案內容最下面:
TodoItem.propTypes = {
className: PropTypes.string,
todo: PropTypes.object,
handleDeleteTodo: PropTypes.func,
handleTodoIsDone: PropTypes.func,
};
註: 可以更詳細的把規則定義好
// 就表示 todo 是一定要傳的參數
todo: PropTypes.object.isRequired,
又或者更精準的定義 todo 裡面的內容:
TodoItem.propTypes = {
className: PropTypes.string,
todo: PropTypes.shape({
id: PropTypes.number,
content: PropTypes.string,
isDone: PropTypes.bool,
}),
handleDeleteTodo: PropTypes.func,
handleTodoIsDone: PropTypes.func,
};
c. 定義好以後,出現了錯誤訊息:Typo in static class property declaration react/no-typos
這是因為上面的 TodoItem.propTypes 我寫成 TodoItem.PropTypes,要特別注意大小寫喔
TodoItem.propTypes = {
...
}
5. 程式碼撰寫說明:
三、補充:以 state 為中心去思考
以資料為中心去思考:資料改變會需要改變畫面,就是 state
資料改變不會影響畫面的,就用
useRef
存起來,例如 id;要記得用xxx.current
state 有兩種:
去思考哪些資料是必備的,那些是可以被計算出來的
a. state: 絕對必要的元素
b. derived state: 可以由現有的 state 組合/計算而成
todos 可以是一個陣列,裡面的 todo 分別是一個個物件